<template>
  <div class="myChart-warp">
    <div id="chart1" ref="chart1" class="myChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myChart1: null
    }
  },
  props: {
    title: {
      type: Object,
      default: () => {
        return {
          left: '市场活跃指数',
          right: '房价指数'
        }
      }

    }
  },
  mounted() {
    this.initMyChart()
  },
  methods: {
    initMyChart() {
      if (this.myChart1) {
        this.myChart1.dispose()
      }
      this.myChart1 = echarts.init(this.$refs.chart1);
      this.myChart1.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: ['市场活跃度', '房价指数', '其他']
          },
          xAxis: [
            {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: this.title.left,
              min: 0,
              max: 100,
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: this.title.right,
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                formatter: '{value} k'
              }
            }
          ],
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              start: 0,
              end: 100
            }
          ],
          series: [
            {
              name: '市场活跃度',
              type: 'bar',
              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 60.6, 60.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
              name: '房价指数',
              type: 'line',
              yAxisIndex: 1,
              data: [2.6, 5.9, 9.0, 8.4, 10.7, 3.7, 6.6, 9.2, 3.7, 2.8, 6.0, 2.3]
            },
            {
              name: '其他',
              type: 'line',
              yAxisIndex: 0,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
          ]
        }
      );

    }
  }
}

</script>

<style lang="scss" scoped>
.myChart-warp {
  width: 100%;
  height: 480px;
  background-color: #ffffff;
  //background-color: rgba(0,0,0,0.3);
  border: 2px solid #f0f0f0;
  border-radius: 8px;

  .myChart {
    width: 100%;
    height: 100%;
  }
}

</style>
